import './App.css'
import Demo1 from './components/Demo1';
import Demo2 from './components/Demo2';
import Demo3 from './components/Demo3';
import Demo4 from './components/Demo4';
import Demo5 from './components/Demo5';


import Class1 from './components/class/Demo1'

const App = () =>{
    return(
      <>
          <Demo1 name="Demo1组件"></Demo1>
          <hr />
          <Demo2  str="父传子通过props传递给自组件"  
                  list = {[1,2,3,4,5,6]} 
                  number = {777} 
                  obj = {{name:"张三",age:23}}
                  isBoolean = {true}
                  unde = {undefined}
                  empty = {null}
                  >
                  
          </Demo2>
          <hr />
          <Demo3></Demo3>
          <hr />
          <Demo4>
                <header slot='header'>头部</header>
              
                <footer slot='footer'>尾部</footer>
          </Demo4>
          <hr/>
          <Demo5></Demo5>
          <hr />
          {/* 类组件 */}
          <Class1 str='类组件要处理this指向问题使用起来是真不方便！'></Class1>
      </>
    );
};


export default App
